<template>
  <div class="user-manage-container">
    <!-- 搜索筛选区 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username"
                    placeholder="请输入用户名"
                    clearable
                    @clear="handleFieldClear('username')"
                    @change="handleFieldChange('username')"/>
        </el-form-item>
        <el-form-item label=姓名>
          <el-input v-model="searchForm.realName"
                    placeholder="请输入姓名"
                    clearable
                    @clear="handleFieldClear('realName')"
                    @change="handleFieldChange('realName')"/>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="searchForm.status"
                     placeholder="请选择状态"
                     @change="handleFieldChange('status')">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="角色">
          <el-select v-model="searchForm.roleId"
                     placeholder="请选择角色"
                     @change="handleFieldChange('roleId')">
            <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区 -->
    <div class="action-bar">
      <div style="display: flex;justify-content: flex-end">
        <el-button type="primary" @click="addUser">
          <i class="el-icon-plus"></i> 新增用户
        </el-button>
        <el-button type="danger" @click="batchDelete" :disabled="selectedRowKeys.length === 0">
          <i class="el-icon-delete"></i> 批量删除
        </el-button>
      </div>
    </div>

    <!-- 加载状态（数据请求中显示） -->
    <div v-if="loading" class="loading-container">
      <el-loading-spinner class="loading-icon"></el-loading-spinner>
      <p>加载中，请稍候...</p>
    </div>
    <div v-else>
    <!-- 用户列表 -->
    <el-table
        :data="userList"
        stripe
        border
        highlight-current-row
        @selection-change="handleSelectionChange"
        style="width: 100%">

      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="realName" label="姓名" />
      <el-table-column label="角色" width="120">
        <template slot-scope="scope">
          {{ getRoleName(scope.row.roleId) || '未知角色' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
<!--          <el-button type="text" size="small" @click="resetPassword(scope.row)">重置密码</el-button>-->
          <el-button type="text" size="small" style="color: #f56c6c" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <!-- 空数据提示（数据为空时显示） -->
    <div v-if="userList.length === 0" class="empty-data">
      <el-empty description="暂无用户数据"></el-empty>
    </div>

    <!-- 分页控件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :visible.sync="userDialogVisible" title="用户管理">
      <el-form :model="userForm" :rules="userRules" ref="userFormRef" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" :disabled="userForm.id" />
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="userForm.realName" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="userForm.roleId" placeholder="请选择角色" clearable>
            <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="userForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="userForm.password" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {api} from "@/api";

export default {
  name: "UserManage",
  data() {
    return {
      // 搜索表单
      searchForm: {
        username: '',
        realName: '',
        status: null,
        roleId: null,
      },
      loading: false, // 加载状态（控制加载动画）
      isDataLoaded: false, // 数据是否已加载（控制内容显示）
      // 用户列表数据
      userList: [],
      // 搜索定时器
      searchTimer: null,
      // 分页信息
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 角色列表
      roleList: [],

      // 选中的行ID
      selectedRowKeys: [],

      // 新增/编辑对话框
      userDialogVisible: false,

      userForm: {
        id: null,
        username: '',
        realName: '',
        roleId: null,
        status: 1,
        password: ''
      },

      // 表单验证规则
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
    };
  },

  created() {
    // 页面加载时获取用户列表

    this.fetchUserList();
    // 获取角色列表
    this.fetchRoleList();
  },

  methods: {
    // 获取用户列表
    fetchUserList() {
      // TODO: 调用API获取用户列表
      // 示例API: GET /api/users?page=1&size=10&username=xxx&status=1
      this.loading = true; // 开始加载，显示加载动画
      this.isDataLoaded = false; // 重置数据加载状态
      console.log('TODO: 获取用户列表', this.searchForm, this.pagination);
      const params = {
        page: this.pagination.current || 1,
        pageSize: this.pagination.size || 10,
        searchUserName:this.searchForm.username || '',//用户名筛选
        searchRealName: this.searchForm.realName || '',
        status: this.searchForm.status !== null ? Number(this.searchForm.status) : null, // 状态筛选,转化为数字
        roleId: this.searchForm.roleId || null // 传递角色ID而非角色名称


      }
      console.log('请求参数:', params); // 调试用
      api.user.userlist(params)
          .then(response => {
            this.userList = response.data.records;
            this.pagination.total = response.data.total;
            this.isDataLoaded = true; // 标记数据已加载
          })
          .catch(error => {
            console.error(error);
            this.$message.error('获取用户列表失败');
            this.userList = []; // 错误时显示空列表
            this.pagination.total = 0;
            this.isDataLoaded = true; // 即使失败，也标记为“已加载”（显示空状态）
          }).finally(() => {
        this.loading = false; // 无论成功失败，都结束加载动画
      });
    },
// 辅助方法：根据角色ID获取角色名称
    getRoleName(roleId) {
      if (!roleId) return ''; // 返回空字符串而非null，避免前端显示"null"

      // 从角色列表中查找匹配的角色
      const role = this.roleList.find(r => r.id === roleId);

      // 添加日志输出，便于调试
      console.log(`查找角色ID ${roleId}，结果:`, role);

      return role.roleName || ''; // 使用可选链操作符，避免角色不存在时出错
    },
    //获取角色列表
    fetchRoleList() {
      // TODO: 调用API获取角色列表
      // 示例API: GET /api/roles
      console.log('TODO: 获取角色列表');
      api.user.getRole()
          .then(response => {
            this.roleList = response.data.map(role => ({
              id: role.id,
              roleName: role.role_name || role.roleName // 兼容两种字段名
            }));
            console.log('处理后的角色列表:', this.roleList); // 确认是否有 roleName
          })
          .catch(error => {
            console.error(error);
            this.$message.error('获取角色列表失败');
            this.loading = false;
          });
    },
// 处理字段清空事件
    handleFieldClear(field) {
      // 延迟执行，确保v-model已经更新为空值
      this.$nextTick(() => {
        if (!this.searchForm[field]) {
          this.autoSearch();
        }
      });
    },

    // 处理字段值变化事件
    handleFieldChange(field) {
      // 如果字段值变为空，触发自动搜索
      if (!this.searchForm[field]) {
        this.autoSearch();
      }
    },

    // 自动搜索方法
    autoSearch() {
      // 延迟执行，避免频繁搜索
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.pagination.current = 1; // 重置为第一页
        this.fetchUserList();
      }, 300); // 防抖延迟300ms
    },
    // 搜索用户
    handleSearch() {
      this.pagination.current = 1; // 重置为第一页
      this.fetchUserList();
    },

    // 重置搜索条件
    resetSearch() {
      this.searchForm = {
        username: '',
        status: null,
        roleId: null
      };
      this.pagination.current = 1;
      this.fetchUserList();
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.size = size;
      this.fetchUserList();
    },

    // 当前页码变化
    handleCurrentChange(current) {
      this.pagination.current = current;
      this.fetchUserList();
    },

    // 行选择变化
    handleSelectionChange(selection) {
      this.selectedRowKeys = selection.map(item => item.id);
    },

    // 新增用户
    addUser() {
      this.userForm = {
        id: null,
        username: '',
        realName: '',
        roleId: '',
        status: 1,
        password: ''
      };
      this.userDialogVisible = true;
    },
    // 编辑用户
    editUser(row) {
      this.userForm = { ...row };
      this.userDialogVisible = true;
    },

    // 保存用户
    async saveUser() {
      this.$refs.userFormRef.validate(async valid => {
        if (valid) {
          try {
            // 构造提交数据（适配后端UserUpdateDto）
            const submitData = {
              id: this.userForm.id, // 新增时为null，更新时为用户ID
              username: this.userForm.username,
              password: this.userForm.password,
              realName: this.userForm.realName,
              roleIds: [this.userForm.roleId], // 后端需要List<Integer>，这里用数组包裹单角色ID
              status: this.userForm.status
              // createTime由后端生成，无需传递
            };

            // 调用后端统一接口（新增/更新共用一个接口）
            await api.user.addOrUpdate(submitData);

            // 提示成功并刷新列表
            this.$message.success(this.userForm.id ? '更新成功' : '新增成功');
            this.userDialogVisible = false; // 关闭弹窗
            this.fetchUserList(); // 刷新用户列表

          } catch (error) {
            console.error('保存用户失败:', error);
            this.$message.error(this.userForm.id ? '更新失败' : '新增失败');
          }
        } else {
          return false; // 验证失败不提交
        }
      });
    },

    // 删除用户（单个删除）
    deleteUser(row) {
      this.$confirm('确定要删除该用户吗？删除后不可恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 调用后端单个删除接口（路径：/user/delete/{id}）
          await api.user.deleteUser(row.id);
          this.$message.success('删除成功');
          this.fetchUserList(); // 刷新列表
        } catch (error) {
          console.error('删除用户失败:', error);
          this.$message.error('删除失败：' + (error.response?.data?.msg || '系统错误'));
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },


    // 批量删除
    batchDelete() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请选择要删除的用户');
        return;
      }

      this.$confirm(`确定要删除选中的 ${this.selectedRowKeys.length} 个用户吗？删除后不可恢复！`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 调用后端批量删除接口（路径：/user/batch-delete，参数：ids数组）
          await api.user.batchDelete(this.selectedRowKeys);
          this.$message.success('批量删除成功');
          this.fetchUserList(); // 刷新列表
          this.selectedRowKeys = []; // 清空选中状态
        } catch (error) {
          console.error('批量删除失败:', error);
          this.$message.error('删除失败：' + (error.response?.data?.msg || '系统错误'));
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    /*// 重置密码
    resetPassword(row) {
      this.resetPwdForm = {
        userId: row.id,
        password: '',
        confirmPassword: ''
      };
      this.resetPwdDialogVisible = true;
    },

    // 确认重置密码
    confirmResetPassword() {
      this.$refs.resetPwdFormRef.validate(valid => {
        if (valid) {
          // TODO: 调用API重置密码
          // 示例API: POST /api/users/{id}/reset-password
          console.log('TODO: 重置密码', this.resetPwdForm);

          // 模拟重置成功
          this.$message.success('密码重置成功');
          this.resetPwdDialogVisible = false;
        } else {
          return false;
        }
      });
    }*/
  }
};
</script>

<style scoped>
.user-manage-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  margin: 10px 0;
}

.action-bar {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
<!--
<script>
export default {
  name: "UserManage"
}
</script>-->
